<template>
	<div class="orderList">
		<div class="lz-header">
			<div style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;flex-wrap: wrap;">
				<div>
					<el-button  type="primary" icon="el-icon-circle-plus-outline" :size="size"
						@click="clickBtnType('添加')">添加</el-button>
					<el-button type="primary" icon="el-icon-printer" :size="size"
						@click="clickBtnType('打印')">打印</el-button>
				</div>
				<div style="display: flex;flex-wrap: wrap;">
					<lz-row-col label="审批状态">
						<el-select v-model="seach.ischeck" placeholder="请选择审批状态" :size="size">
							<el-option label="未审批" value="1"></el-option>
							<el-option label="审批中" value="2"></el-option>
							<el-option label="已审批" value="3"></el-option>
							<el-option label="已驳回" value="4"></el-option>
						</el-select>
					</lz-row-col>
					<lz-row-col label="审批状态">
						<el-select v-model="seach.ischeck" placeholder="请选择审批状态" :size="size">
							<el-option label="未审批" value="1"></el-option>
							<el-option label="审批中" value="2"></el-option>
							<el-option label="已审批" value="3"></el-option>
							<el-option label="已驳回" value="4"></el-option>
						</el-select>
					</lz-row-col>
					<lz-row-col label="付款状态">
						<el-select v-model="seach.isfk" placeholder="请选择付款状态" :size="size">
							<el-option label="N" value="1"></el-option>
							<el-option label="Y" value="2"></el-option>
						</el-select>
					</lz-row-col>
					<lz-row-col>
						<div style="display: flex;">
							<el-button type="primary" icon="el-icon-search" :size="size" style="margin: 0 10px;"
								@click="submitFormSeach()">搜索</el-button>
							<el-popover placement="bottom" trigger="click" width="560" v-model="seach.visible">
								<div style="display: flex;flex-wrap: wrap;">
									<lz-row-col label="采购订单">
										<el-input v-model="seach.buyNo" placeholder="请输入采购订单" :size="size"
											@keyup.enter.native="submitFormSeach"></el-input>
									</lz-row-col>
									<lz-row-col label="供应商编号">
										<el-input v-model="seach.supNo" placeholder="请输入供应商编号" :size="size"></el-input>
									</lz-row-col>
									<lz-row-col label="供应商名称">
										<el-select v-model="seach.supCname" placeholder="请选择供应商名称" :size="size">
											<el-option label="海欣" value="1"></el-option>
										</el-select>
									</lz-row-col>
									<lz-row-col label="订购日期">
										<el-date-picker style="width: 170px;" v-model="seach.buydate" type="daterange" range-separator="至"
											:size="size" start-placeholder="开始日期" end-placeholder="结束日期">
										</el-date-picker>
									</lz-row-col>
									<lz-row-col label="采购人">
										<el-input v-model="seach.buyman" placeholder="请输入采购人" :size="size"
											@keyup.enter.native="submitFormSeach"></el-input>
									</lz-row-col>
									<lz-row-col label="付款日期">
										<el-date-picker style="width: 170px;" v-model="seach.fkdate" type="daterange" range-separator="至"
											start-placeholder="开始日期" end-placeholder="结束日期" :size="size">
										</el-date-picker>
									</lz-row-col>
								</div>
								<div style="display: flex;margin-top: 10px;justify-content: center;">
									<el-button :size="size" type="primary" icon="el-icon-search" @click="submitFormSeach()">搜索</el-button>
									<el-button :size="size" icon="el-icon-refresh-right" @click="resetForm()">重置</el-button>
									<el-button :size="size" type="warning" @click="seach.visible=false" icon="el-icon-circle-close">取消</el-button>
								</div>
								<el-button type="primary" slot="reference" icon="el-icon-more" :size="size"></el-button>
							</el-popover>
							
						</div>
					</lz-row-col>
				</div>
			</div>
		</div>
		<div class="r-c-center">
			<el-table :data="table.list" border :size="size" @selection-change="handleSelectionChange">
				<el-table-column type="expand" >
				</el-table-column>
				<el-table-column type="selection" width="55" >
				</el-table-column>
				<el-table-column prop="ischeck" label="审批状态" width="80" >
					<template slot-scope="scope">
						<el-tag :type="computerTagType(scope.row.ischeck)">{{scope.row.ischeck}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="isfk" label="付款状态" width="160" ></el-table-column>
				<el-table-column prop="buyNo" label="采购订单" width="100" ></el-table-column>
				<el-table-column prop="supNo" label="供应商编号" show-overflow-tooltip  width="100"></el-table-column>
				<el-table-column prop="comname" label="供应商名称" show-overflow-tooltip  width="100"></el-table-column>
				<el-table-column prop="buydate" label="订购日期" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="accountsum" label="合计金额" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="taxcode" label="单价税率码" show-overflow-tooltip  width="100"></el-table-column>
				<el-table-column prop="taxname" label="单价税率描述" show-overflow-tooltip  width="100"></el-table-column>
				<el-table-column prop="coin" label="币别" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="cksl" label="付款方式" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="settleKind" label="结算方式" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="supCname" label="采购公司" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="buyman" label="采购人" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="fkdate" label="付款日期" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="pername" label="个人收款名称" show-overflow-tooltip  width="100"></el-table-column>
				<el-table-column prop="perbkcode" label="个人收款账号" show-overflow-tooltip  width="100"></el-table-column>
				<el-table-column prop="perbkbank" label="个人收款银行" show-overflow-tooltip  width="100"></el-table-column>
				<el-table-column prop="createman" label="创建人" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="createdate" label="凭证日期" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="note" label="备注" show-overflow-tooltip ></el-table-column>
				<el-table-column fixed="right" label="操作" width="340">
					<template slot-scope="scope">
						<el-button @click="seeEmilFn(scope.row)" type="text" size="small">查看</el-button>
						<el-button @click="seeEmilFn(scope.row)" type="text" size="small" :disabled="scope.row.ischeck=='审批中'">修改</el-button>
						<el-button @click="seeEmilFn(scope.row)" type="text" size="small">删除</el-button>
						<el-button @click="seeEmilFn(scope.row)" type="text" size="small" :disabled="scope.row.ischeck=='审批中'">发起审批</el-button>
						<el-button @click="seeEmilFn(scope.row)" type="text" size="small" v-if="scope.row.ischeck=='审批中'">审批进度</el-button>
						<el-button @click="seeEmilFn(scope.row)" type="text" size="small">付款数据维护</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="el-pagination"
				background layout="total, sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 30, 40]"
				:page-size="table.page.pageSize" :total="table.page.total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	let that
	import {
		mapGetters
	} from 'vuex'
	import lzRowCol from '@/components/lzRowCol/lzRowCol'
	export default {
		components: {
			lzRowCol
		},
		name: 'orderList',
		props: {
			activeInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		computed: {
			...mapGetters(['size', 'themeBtColor', 'api']),
			computerTagType(){
				return (text)=>{
					if(text=='未审批'){
						return 'warning'
					}
					if(text=='审批中'){
						return ''
					}
					if(text=='已审批'){
						return 'success'
					}
					if(text=='已驳回'){
						return 'danger'
					}
					return 'info'
				}
			},
		},
		data() {
			return {
				//表格数据
				table: {
					list: [{
						accountsum: "25.00",
						buyNo: "45005448",
						buydate: "2020-07-25 00:00:00.0",
						buyman: "黄小姐",
						cksl: "银行转账",
						coin: "RMB",
						comname: "东莞市莞之彩实业有限公司",
						createdate: "2020-07-25 00:00:00.0",
						createman: "admin",
						fkdate: "",
						id: "2c92be327385a571017385a759240000",
						ischeck: "审批中",
						isfk: "N",
						note: "",
						outdate: "",
						perbkbank: "",
						perbkcode: "",
						pername: "",
						settleKind: "月结45天",
						state: "closed",
						supCname: "东莞市华伦纸品有限公司",
						supNo: "S001",
						taxcode: "Z2",
						taxname: "7%-开票税率",
					},
					{
						accountsum: "0.00",
						buyNo: "45005446",
						buydate: "2020-07-25 00:00:00.0",
						buyman: "黄小姐",
						cksl: "银行转账",
						coin: "RMB",
						comname: "东莞市莞之彩实业有限公司",
						createdate: "2020-07-25 00:00:00.0",
						createman: "admin",
						fkdate: "",
						id: "402883ea73857b6b0173858276b50002",
						ischeck: "未审批",
						isfk: "N",
						note: "",
						outdate: "",
						perbkbank: "",
						perbkcode: "",
						pername: "",
						settleKind: "月结45天",
						state: "closed",
						supCname: "东莞市华伦纸品有限公司",
						supNo: "S001",
						taxcode: "Z2",
						taxname: "7%-开票税率",
					},
					{
						accountsum: "44418.80",
						buyNo: "45004372",
						buydate: "2019-08-07 00:00:00.0",
						buyman: "Polaris Chen",
						cksl: "月结转账",
						coin: "RMB",
						comname: "东莞市辰彦实业有限公司",
						createdate: "2019-08-07 00:00:00.0",
						createman: "WYLIAO",
						fkdate: "",
						id: "45004372",
						ischeck: "已驳回",
						isfk: "N",
						note: "",
						outdate: "2019-08-15 00:00:00.0",
						perbkbank: "农业银行东莞市大朗支行",
						perbkcode: "6228480602390564410",
						pername: "郑昆阳",
						settleKind: "月结30天",
						state: "closed",
						supCname: "东莞市大朗海欣包装制品厂",
						supNo: "S003",
						taxcode: "0",
						taxname: "",
					},
					],
					multiple: [], //多选
					page: {
						pageNo: 1,
						pageSize: 10,
						total: 0,
					}
				},
				//搜索
				seach: {
					visible:false,//高级搜索
					ischeck: '', //审批状态
					isfk: '', //付款状态
					buyNo: '', //采购订单
					supNo: '', //供应商编号
					supCname: '', //供应商名称
					buydate: '',
					buydate_begin: '', //订购开始日期
					buydate_end: '', //订购结束日期
					buyman: '', //采购人
					fkdate: '',
					fkdate_begin: '', //付款日期
					fkdate_end: '', //付款结束日期
				},
				//移动到
				dropdown: {
					list: [], //文件夹列表
				}
			}
		},
		mounted() {
			that = this
		},
		methods: {
			//查看邮件详情
			seeEmilFn(row) {
				that.$emit('seeEmilFn', row)
			},
			//重置搜索表单
			resetForm() {
				that.seach = {
					visible:true,
					ischeck: '', //审批状态
					isfk: '', //付款状态
					buyNo: '', //采购订单
					supNo: '', //供应商编号
					supCname: '', //供应商名称
					buydate: '',
					buydate_begin: '', //订购开始日期
					buydate_end: '', //订购结束日期
					buyman: '', //采购人
					fkdate: '',
					fkdate_begin: '', //付款日期
					fkdate_end: '', //付款结束日期
				}
			},
			//搜索
			submitFormSeach() {
				//获取邮箱数据
				that.getEmailDate()
			},
			//获取文件夹列表
			gerMailBoxListBox() {
				return new Promise((result, reject) => {
					that.GLOBAL.doPost(that.api.GLOBAL_oa_admin_rest_vmail_mailBox_listBox, {}).then((res) => {
						if (res.code == '0') {
							that.dropdown.list = res.data

						} else {
							that.dropdown.list = []
						}
						result(that.dropdown.list)
					})
				})

			},
			//初始化搜索参数
			initSeach() {
				that.seach = {
					visible: false,
					sendUser: '', //发件人
					receiveUser: '', //收件人
					mailSubject: '', //邮箱主题
				}
			},
			//获取邮箱数据
			getEmailDate() {
				let req = {
					showLoading: true,
					pageNo: that.table.page.pageNo,
					pageSize: that.table.page.pageSize,
					mailBoxId: that.activeInfo.mailBoxId,
					mailSubject: that.seach.mailSubject,
					sendUser: that.seach.sendUser,
					receiveUser: that.seach.receiveUser,
				}
				that.GLOBAL.doPost(that.api.GLOBAL_oa_admin_rest_vmail_mail_list, req).then((res) => {
					if (res.code == '0') {
						that.table.page.total = res.count
						let arr = res.data.map(item => {
							item.htmlContent = that.$lizhao.htmlUtil.htmlDecode(item.htmlContent)
							return item
						})
						that.table.list = arr
					} else {
						that.table.page.total = 0
						that.table.list = []
					}
				})
			},
			//表格多选
			handleSelectionChange(val) {
				console.log(val);
				that.table.multiple = val;
			},
			//表格按钮操作
			clickBtnType(text, event) {
				if (text == '删除') {
					that.delectEmail()
				} else if (text == '彻底删除') {
					that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						that.thoroughDelectEmail()
					}).catch(() => {});
				} else if (text == '标记星标') {
					that.mailMove(2)
				} else if (text == '标记红旗') {
					that.mailMove(3)
				} else if (text == '转发') {
					that.forward()
				} else if (text == '移动到') {
					that.mailMove(event)
				}
			},
			//转发
			forward() {
				if (that.table.multiple.length == 1) {
					that.$emit('forwardFn', that.table.multiple[0])
				} else {
					that.$message.warning('转发只能选择一条邮件')
				}
			},
			//标记星标标记红旗
			mailMove(mailBoxId) {
				let ids = that.mapActive('id').join(',')
				let req = {
					ids: ids,
					mailBoxId: mailBoxId
				}
				that.GLOBAL.doGet(that.api.GLOBAL_oa_admin_rest_vmail_mail_move, req).then(res => {
					if (res.code == '0') {
						that.$message.success(res.data.msg)
						that.$emit('goBack')
					}
				})
			},
			//筛选出已选的
			mapActive(name) {
				let arr = that.table.multiple.map((res) => {
					return res[name]
				})
				return arr
			},
			//彻底删除
			thoroughDelectEmail() {
				let ids = that.mapActive('id').join(',')
				that.GLOBAL.doGet(that.api.GLOBAL_oa_admin_rest_vmail_mail_deleteMail, {
					ids: ids
				}).then(res => {
					if (res.code == '0') {
						that.$message.success(res.data.msg)
						that.$emit('goBack')
					}
				})
			},
			//删除
			delectEmail() {
				let ids = that.mapActive('id').join(',')
				that.GLOBAL.doGet(that.api.GLOBAL_oa_admin_rest_vmail_mail_delete, {
					ids: ids
				}).then(res => {
					if (res.code == '0') {
						that.$message.success(res.data.msg)
						that.$emit('goBack')
					}
				})
			},
			//切换页
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				that.table.page.pageNo = val
				//获取邮箱数据
				that.getEmailDate()
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				that.table.page.pageSize = val
				//获取邮箱数据
				that.getEmailDate()
			},
		}

	}
</script>

<style lang="scss" scoped>
	.orderList {
		.lz-header {}

		.r-c-center {
			overflow: hidden;

			.el-pagination {
				float: right;
				margin-top: 10px;
			}
		}

		.lz-header-bt {
			margin-left: 10px;
			margin-bottom: 10px;
		}

	}
</style>
